<div class="top-bg">
  <!-- {{log}}
   -->
   <div class="back" routerLink="/">
     <img src="../../../assets/icons/back.png" alt="">
   </div>
   <div class="uc-info-sel" (click)="onChangeConcern()">
      <img *ngIf="del?.isFollowed == 'Y'" style="margin-left: 20%; width: 2.6875rem;height: 2.4375rem;" src="../../../assets/images/guide-page/sel-true.png" alt="" />
      <img *ngIf="del?.isFollowed != 'Y'" style="margin-left: 20%; width: 2.6875rem;height: 2.4375rem;" src="../../../assets/images/guide-page/sel-false.png" alt="" />
    </div>
   <div class="swiper-c" [ngClass]="'swiper'">
    <weui-swiper #swiper [options]="options">
      <div class="swiper-container">
        <!-- 容器（必选） -->
        <div class="swiper-wrapper">
          <div class="swiper-slide" *ngFor="let i of imgs">
            <img style="width: 100%;height:98%" src="{{i}}" alt="">
          </div>
        </div>
        <!-- 分页（可选） -->
        <div class="swiper-pagination"></div>
      </div>
    </weui-swiper>
  </div>

  <div class="del-h">
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="placeholder del-title">{{del?.travelAgencyForUserView.name}}</div>
      </div>
      <div class="placeholder rf">
        <div *ngFor="let item of rate" class="my-stars">
          <img src="{{item.url}}" alt="">
        </div>
        <!-- <weui-rating  [(ngModel)]="rate" [config]="customIconsAndClassCog" [readonly]="true"></weui-rating> -->
      </div>
    </div>

    <div class="">
      <a class=" del-map" href="javascript:;">
        <div class="weui-cell__bd"><img style="width: 1.0625rem;height: 1.25rem;" src="../../../assets/icons/dw.png" alt=""> {{del?.travelAgencyForUserView.address}}</div>
        <!-- <div class="weui-cell__ft">{{'AGENCY-Page.map' | translate}}</div> -->
      </a>
    </div>

    <div class="del-span-type">
      <span class="del-span-red">{{serviceStatus}}</span>
      <span class="del-span-green">{{serviceTime}}</span>
    </div>

  </div>
  
  <div class="del-gray">
    {{del?.travelAgencyForUserView.brief}}
  </div>
  <div class="del-serve">

    <h2>{{'AGENCY-Page.Service-Items' | translate}}</h2>

    <div class="" >
      <span class="" 
        *ngFor="let item of del?.agencyServiceItemList" >
        <span style="font-size: 1.875rem;display: inline-block;margin-right: 2rem;">{{item.name}}</span>
      </span>
    </div>

    <h2>{{'AGENCY-Page.SYDY' | translate}}</h2>

    <div style="display: flex;
    flex-wrap: wrap;">
      <div  
        *ngFor="let item of del?.agencyTravelGuideList" style="width: 33.33%;
        text-align: center;">
        <div class="del-img-c">
          <div (click)='onSel(item)'>
            <img src="{{item.image}}" alt=""  />
          </div>
          <div class="del-store" (click)='onStore(item)'>
            <img *ngIf='item?.isFollowed != "Y"' style="width: 3rem;height:3rem;" src="../../../assets/icons/store-down.png" alt="">
            <img *ngIf='item?.isFollowed == "Y" ' style="width: 3rem;height:3rem;" src="../../../assets/icons/store-up.png" alt="">
          </div>
          <p class="del-img-name">{{item.name}}</p>
        </div>
      </div>
    </div>
    <!-- <div class="ck-all">
        查看全部 
    </div> -->
  </div>

  <div class="del-pay-c">
    <div class="del-pay-text">
      <span>{{'AGENCY-Page.Appointment-Cost' | translate}}</span>
      <span class="jgsm" (click)="onShowOfHtml()"> {{'AGENCY-Page.price-indication' | translate}} <img style="width: 1.25rem;height: 1.25rem;" src="../../../assets/icons/gth.png"
          alt=""></span>
    </div>
    <div class="amount-text">￥<span class="pay-many">{{del?.travelAgencyForUserView.reservationFee}}</span></div>
    <a *ngIf="token" class="pay-btn"  (click)="toCreateOrder()">{{'Appointment' | translate}}</a>
    <a *ngIf="!token" class="pay-btn" (click)="openLogin()">{{'login' | translate}}</a>
  </div>
  <login-dialog [(showdialog)]="showLogin" (loginSuccess)="loginSuccess()"></login-dialog>
</div>